<template>
  <div>
    <div id="components-layout-demo-basic">
      <a-layout>
        <a-layout-header>
          <div class="topbar">
            <div class="topbar-side">
              <a-row style="width: 83.33%;margin: 0px auto;">
                <a-col :span="1">
                  <img src="../../assets/images/logobefroe2.png" alt  />
                </a-col>
                <a-col :span="2" @click="tapSitch(0)">
                  <h3>中科新华</h3>
                </a-col>
                <a-col :span="1" style="text-align: center;">
                  <span @click="tapSitch(0)" class="btn" :class="{activity:isShowModel[0]}" style="border: none;">首页</span>
                </a-col>
                <a-col :span="2" style="text-align: center;">
                  <span @click="tapSitch(1)" class="btn" :class="{activity:isShowModel[1]}" style="border: none;">通知公告</span>
                </a-col>
                <a-col :span="2" style="text-align: center;">
                  <a-dropdown>
                      <span :class="{activity:isShowModel[4] || isShowModel[3] || isShowModel[5] || isShowModel[6] || isShowModel[7] || isShowModel[8] || isShowModel[9] || isShowModel[10]}"> {{ knowlageText }} <a-icon type="down" /> </span>
                      <a-menu slot="overlay" @click="choseItem">
                        <a-menu-item class="item-menu" key="3">疾病知识</a-menu-item>
                        <a-menu-item class="item-menu" key="4">用药建议</a-menu-item>
                        <a-menu-item class="item-menu" key="5">药品信息</a-menu-item>
                        <a-menu-item class="item-menu" key="6">检查检验</a-menu-item>
                        <a-menu-item class="item-menu" key="7">期刊文献</a-menu-item>
                        <a-menu-item class="item-menu" key="8">医学图形库</a-menu-item>
                        <a-menu-item class="item-menu" key="9">既往病例</a-menu-item>
                        <a-menu-item class="item-menu" key="10">临床专家</a-menu-item>
                      </a-menu>
                    </a-dropdown>
                </a-col>
                <a-col :span="2" style="text-align: center;">
                  <span @click="tapSitch(2)" class="btn" :class="{activity:isShowModel[2]}" style="border: none;">关于我们</span>
                </a-col>
                <a-col :span="3" style="margin-left: 15px;">
                  <a-input class="a-input-search" style="background-color: #F8F8F8;" placeholder="请输入搜索内容" />
                </a-col>
                <a-col :span="2" style="text-align: center;position: absolute;right: 0;bottom: 7px;">
                  <user-layoutlogin />
                </a-col>
              </a-row>
            </div>
          </div>
        </a-layout-header>
        <!-- 首页 -->
        <div class="user-layout-bottom" v-show="isShowModel[0]"><Beforechart/></div>
        <!-- 通知公告 -->
        <div class="user-layout-bottom" v-show="isShowModel[1]"><Beforenotice/></div>
        <!-- 关于我们 -->
        <div class="user-layout-bottom" v-show="isShowModel[2]"><Beforeabout/></div>
        <!-- 疾病知识 -->
        <div class="user-layout-bottom" v-show="isShowModel[3]"><DiseaseKnowledge/></div>
        <!-- 用药建议 -->
        <div class="user-layout-bottom" v-show="isShowModel[4]"><MedicationRecommendations/></div>
        <!-- 药品信息 -->
        <div class="user-layout-bottom" v-show="isShowModel[5]"><DrugInformation/></div>
        <!-- 检查检验 -->
        <div class="user-layout-bottom" v-show="isShowModel[6]"><InspectionInspection/></div>
        <!-- 期刊文献 -->
        <div class="user-layout-bottom" v-show="isShowModel[7]"><PeriodicalLiterature/></div>
        <!-- 医学图形库 -->
        <div class="user-layout-bottom" v-show="isShowModel[8]"><MedicalGraphicsLibrary/></div>
        <!-- 既往典型 -->
        <div class="user-layout-bottom" v-show="isShowModel[9]"><PastTypical/></div>
        <!-- 临床专家 -->
        <div class="user-layout-bottom" v-show="isShowModel[10]"><ClinicalExpert/></div>
      </a-layout>
    </div>
  </div>
</template>

<script>
import RouteView from '@/components/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import VeLine from 'v-charts/lib/line.common'
import VeRing from 'v-charts/lib/ring.common'
import VeBar from 'v-charts/lib/bar.common'
import VePie from 'v-charts/lib/pie.common'
import VeHistogram from 'v-charts/lib/histogram.common'
import axios from '../../../node_modules/axios/dist/axios'
import UserLayoutlist from '../layouts/UserLayout-list'
import UserLayoutlogin from '../layouts/UserLayout-login'

import Beforechart from '../layouts/Beforechart'//首页
import Beforeabout from '../layouts/Beforeabout'//关于我们
import Beforenotice from '../layouts/Beforenotice'//通知
import Beforeknowledge from '../layouts/Beforeknowledge'//知识

import ClinicalExpert from '../beforeLoginKnoelage/ClinicalExpert'//临床专家
import DiseaseKnowledge from '../beforeLoginKnoelage/DiseaseKnowledge'//疾病知识
import DrugInformation from '../beforeLoginKnoelage/DrugInformation'//药品信息
import InspectionInspection from '../beforeLoginKnoelage/InspectionInspection'//检查检验
import MedicalGraphicsLibrary from '../beforeLoginKnoelage/MedicalGraphicsLibrary'//医学图形库
import MedicationRecommendations from '../beforeLoginKnoelage/MedicationRecommendations'//用药建议
import PastTypical from '../beforeLoginKnoelage/PastTypical'//既往典型
import PeriodicalLiterature from '../beforeLoginKnoelage/PeriodicalLiterature'//期刊文献

export default {
  //登录前首页
  name: 'UserLayout',
  components: {
    VeLine,
    VeBar,
    VePie,
    VeRing,
    VeHistogram,
    swiper,
    swiperSlide,
    UserLayoutlist,
    UserLayoutlogin,
    Beforechart,
    Beforeabout,
    Beforenotice,
    Beforeknowledge,
    ClinicalExpert,
    DiseaseKnowledge,
    DrugInformation,
    InspectionInspection,
    MedicalGraphicsLibrary,
    MedicationRecommendations,
    PastTypical,
    PeriodicalLiterature,
  },
  mixins: [mixinDevice],
  beforeCreate() {
    this.$on('noticeDetail',(data) => {
      alert(1);
    })
  },
  data() {
    return {
      swiperOption: {
        notNextTick: true,
        autoplay: true,
        speed: 1000,
        dialogVisible: false,
        loop: true,
        modal1Visible: false,
        pagination: {
          el: '.swiper-pagination'
        },
      },
      knowlageText: "知识库",
      knowlageTextAry: ["知识库","知识库","知识库","疾病知识","用药建议","药品信息","检查检验","期刊文献","医学图形库","既往病例","临床专家"],
      isShowModel: [true,false,false,false,false,false,false,false,false,false,false,false],
      messages: [],
      chartData: {
        columns: ['项目', '展示'],
        rows: [
          { 项目: '病例总数', 展示: 520 },
          { 项目: '应完成', 展示: 400 },
          { 项目: '已完成', 展示: 700 },
          { 项目: '未完成', 展示: 200 },
          { 项目: '即将超期', 展示: 540 }
        ]
      }
    }
  },
  created() {
    this.$on('noticeDetail',(data) => {
      alert(1);
    })
  },
  
  mounted() {
    let currentPage = localStorage.getItem('currentPage');
    if(currentPage){
      this.isShowModel = [false,false,false,false,false,false,false,false,false,false,false,false];
      this.isShowModel[currentPage] = true;
      this.knowlageText = this.knowlageTextAry[currentPage];
      localStorage.removeItem('currentPage');
    }
    document.body.classList.add('userLayout')
  },
  beforeDestroy() {
    document.body.classList.remove('userLayout')
  },
  
  methods: {
    tapSitch(sign){
      this.isShowModel = [false,false,false,false,false,false,false,false,false,false,false,false];
      this.isShowModel[sign] = true;
      this.knowlageText = this.knowlageTextAry[sign];
      this.$forceUpdate();
    },
    choseItem({key}){
      this.isShowModel = [false,false,false,false,false,false,false,false,false,false,false,false];
      this.isShowModel[key] = true;
      this.$forceUpdate();
      this.knowlageText = this.knowlageTextAry[key];
    }
  }
}
</script>

<style lang="scss" scoped>
.item-menu{
  display: block;
  margin: 0;
  padding: 5px;
}
.foorwords-f{
  margin-top: -20px;
}
.btn{
  cursor: pointer;
}
.foorwords-l{
  margin-bottom: 30px;
}
.ant-btn-link {
  color: #000;
}
.ant-layout {
  background-color: #ebeef5;
}
#components-layout-demo-basic {
  min-width: 1620px;
  color: #000 !important;
  .ant-layout-header {
    background-color: #ebeef5;
    color: #000 !important;
    padding: 0px;
  }
  .ant-layout-content {
    height: 160px;
    background-color: #ebeef5;
    color: #000 !important;

    .swiper {
      color: #000 !important;
    }
  }
  .ant-layout-footer {
    background-color: #ebeef5;
    height: 100%;
    padding: 0;

    #chart1 {
      width: 100%;
      height: 100%;
    }

    a-col {
      background-color: #ccc;
    }
  }
}
.activity{
  color: #38C3C8;
}
.topbar {
  height: 60px;
  line-height: 60px;
  background-color: #fff;

  .topbar-side {
    margin: auto;

    img {
      height: 44px;
    }
    h3 {
      line-height: 60px;
      margin-left: 20px;
    }
    button {
      line-height: 50px;
      margin-left: 20px;
      background-color: #fff;
    }
    button:hover{
      color: #38c3c8;
    }
    .a-input-search {
      width: 220px;
      line-height: 60px;
      text-align: center;
      margin-top: 14px;
      margin-left: 20px;
      border: none;
    }
  }
  .topbar-side:hover {
    color: #000;
  }
}
.bianjiqi span {
  justify-content: center;
}
.bianjiqi div span .topzhuti {
  margin-left: 20px;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#zhongjianjianxi {
  margin-left: 20px;
  background-color: #ebeef5;
}
.bianjiqi {
  background-color: #ebeef5;
  width: 83.33%;
  margin-left: 8.3%;

  .bianjiqi-low1 {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;

    .bianjiqi-low1-low1{
      background-color: #F9FAFB;
      height: 35px;
      font-size: 16px;
      line-height: 35px;
    }
    .bianjiqi-low1-low2{
      background-color: #fff;
      height: 437px;
    }

    .bianjiqi-low1-first {
      background-color: #fff;
    }
  }
  .bianjiqi-low2 {

    .bianjiqi-low2-low1{
      background-color: #F9FAFB;
      height: 35px;
      font-size: 16px;
      line-height: 35px;
    }
    .bianjiqi-low2-low2{
      background-color: #fff;
      height: 400px;
    }  
    .bianjiqi-low1-first {
      background-color: #fff;
    }
  }
}
#bianjiqi-low-low{
  background-color: #ccc;
}
.user-layout-bottom{
  width: 83.33%;
  margin: 0px auto;
  min-width: 1620px;
}
</style>